<template>
  <v-container fluid align-start>
    <v-dialog v-model="dialog" persistent max-width="500px">
      <v-btn color="primary" slot="activator" class="mb-2">New Item</v-btn>
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm12 md12>
                <v-form v-model="valid" ref="form">
                  <v-text-field
                    label="Tag Name"
                    v-model="item.tag_name"
                    :rules="nameRules"
                    :counter="25"
                    required
                  ></v-text-field>
                  <v-btn :disabled="!valid" color="blue darken-1" flat @click.native="save">Save</v-btn>
                  <v-btn color="blue darken-1" flat @click.native="close">Close</v-btn>
                </v-form>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="tagItems"
      :pagination.sync="pagination"
      :search="search"
      item-key="id"
      class="elevation-1"
      select-all
    >
      <template slot="items" slot-scope="props">
        <tr :active="props.selected">
          <td>
            <v-checkbox
              primary
              :input-value="props.selected"
              @click="props.selected = !props.selected"
            ></v-checkbox>
          </td>
          <td>{{ props.item.id }}</td>
          <td class="text-xs-right">{{ props.item.tag_name }}</td>
          <td class="text-xs-right">{{ props.item.updatets }}</td>
          <td class="text-xs-right">{{ props.item.createts }}</td>
          <td class="justify-center layout px-0">
            <v-btn icon class="mx-0" @click="editItem(props.item)">
              <v-icon color="teal">edit</v-icon>
            </v-btn>
            <v-btn icon class="mx-0" @click="deleteItem(props.item.id)">
              <v-icon color="pink">delete</v-icon>
            </v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
    <v-snackbar
      :timeout="timeout"
      :top="y === 'top'"
      :bottom="y === 'bottom'"
      :right="x === 'right'"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :vertical="mode === 'vertical'"
      v-model="showSlackbar"
    >
      {{ showSlackbarText }}
      <v-btn flat color="pink" @click.native="this.$store.commit('restHTTPMessage')">Close</v-btn>
    </v-snackbar>
  </v-container>
</template>

<script>
export default {
  name: 'TagManager',
  data () {
    return {
      dialog: false,
      isEdit: false,
      valid: false,
      nameRules: [
        (v) => !!v || 'Name is required',
        (v) => (v && v.length <= 25) || 'Name must be less than 25 characters'
      ],
      headers: [
        {text: 'ID', align: 'right', value: 'id'},
        {text: 'Tag Name', align: 'left', value: 'tag_name'},
        {text: 'Update TS', align: 'left', value: 'updatets'},
        {text: 'Create TS', align: 'left', value: 'createts'}
      ],
      selected: [],
      pagination: {
        sortBy: 'id'
      },
      search: '',
      item: {
        tag_name: ''
      },
      y: 'top',
      x: null,
      mode: '',
      timeout: 5000
    }
  },
  methods: {
    save () {
      if (this.$refs.form.validate()) {
        if (this.isEdit) {
          this.$store.dispatch('updateTagItem', this.item)
          this.isEdit = false
        } else {
          this.$store.dispatch('createTagItem', this.item)
        }
      }
      this.$ref.form.reset()
      this.dialog = false
    },
    close () {
      this.isEdit = false
      this.dialog = false
      this.item = {}
    },
    editItem (item) {
      this.item = item
      this.isEdit = true
      this.dialog = true
    },
    deleteItem (key) {
      this.$store.dispatch('removeTagItem', key)
    }
  },
  computed: {
    formTitle () {
      return this.isEdit ? 'Edit Item' : 'New Item'
    },
    tagItems () {
      return this.$store.state.tag.tagItems
    },
    showSlackbar: {
      get () {
        return this.$store.state.tag.http_status !== 0
      },
      set () {
        this.$store.commit('restHTTPMessage')
      }
    },
    showSlackbarText () {
      return this.$store.state.tag.http_msg
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
